<template>
  <div id="home">
    <!-- 头部的标题栏 -->
    <!-- <div v-postion="{top:0,left:0,right:0,z:100}"> -->
    <title-bar v-postion="{top:0,left:0,right:0,z:100}">
      <h2 slot="center">首页</h2>
    </title-bar>  
    <!-- </div> -->
    <div style="margin-top:50px">
       <!-- 搜索栏内容 -->
      <search-bar @searchClick="seaClick"></search-bar>
      <!-- 轮播图部分 -->
      <home-swiper></home-swiper>
      <!-- 宫格展示 -->
      <home-grid></home-grid>
      <!-- 首页商品信息 -->
      <home-info></home-info>
    </div>
   
  </div>
</template>

<script>
import SearchBar from '../components/common/search_bar/SearchBar.vue'
import TitleBar from '../components/common/title_bar/TitleBar.vue'
import HomeGrid from '../components/HomeChildrenComponents/HomeGrid.vue'
import HomeInfo from '../components/HomeChildrenComponents/HomeInfo.vue'
import HomeSwiper from '../components/HomeChildrenComponents/HomeSwiper.vue'
export default {
  components: { TitleBar, SearchBar, HomeSwiper, HomeGrid, HomeInfo },
  name:"Home",
  methods:{
    seaClick(r){
      this.$emit("searchClick",r)
    }
  }
}
</script>

<style scoped>
  #home{
    margin-bottom: 50px;
  }
</style>